$class-prefix-error-block: 'ygm-error-block';

.#{$class-prefix-error-block} {
  --image-height: 200px;
  --image-width: 100%;

  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  transform: translateY(-10%);

  &-image {
    height: var(--image-height);
    width: var(--image-width);

    & svg {
      height: 100%;
    }
  }

  &-description {
    text-align: center;
    font-size: var(--ygm-font-size-s);
    color: var(--ygm-color-weak);
    line-height: 1.4;
    margin-top: 10px;
    &-title {
      font-size: var(--ygm-font-size-m);
    }
    &-subtitle {
      margin-top: 8px;
    }
  }
}
